import {ModalForm, ProFormInstance, ProFormSelect, ProFormText} from '@ant-design/pro-components';
import {Button, Input, message, Space} from 'antd';
import React from 'react';
import {check} from '@/services/data-media-source-api';
import {enumInversion} from '@/utils/calculateUtil';

export type CreateOrUpdateFormProps = {
  onCancel: () => void;
  onSubmit: (values: API.DataMediaSource) => Promise<boolean>;
  updateModalOpen: boolean;
  values?: Partial<API.MixSource>;
  title?: string;
};


enum JdbcProtocol {
  'jdbc:mysql://' = 'MYSQL',
  'jdbc:oracle:thin:@' = 'ORACLE',
}

const CreateOrUpdateForm: React.FC<CreateOrUpdateFormProps> = (props) => {

  const formRef = React.useRef<ProFormInstance>();
  const [protocol, setProtocol] = React.useState<string>(props?.values?.type ? enumInversion(JdbcProtocol)[props?.values?.type] : '');

  const checkConnection = async () => {
    const {errorFields} = await formRef?.current?.validateFields();
    if (errorFields) {
      return;
    }
    const hide = message.loading('验证中');
    try {

      const fields = formRef?.current?.getFieldsFormatValue!();
      const res = await check(fields);
      hide();
      if (res) {
        message.info(res);
        return;
      }
      return;
    } catch (error) {
      hide();
      return;
    }
  };

  return (<ModalForm
      formRef={formRef}
      title={props?.title}
      layout={"horizontal"}
      labelAlign={"right"}
      labelCol={{span: 4}}
      width="700px"
      open={props.updateModalOpen}
      onFinish={async v => {
        const res = await props.onSubmit(v)
        if (res) {
          setProtocol('');
        }
      }}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          props.onCancel();
          setProtocol('');
        }
      }}
    >
      <ProFormText initialValue={props?.values?.id} hidden={true} name='id'/>
      <ProFormText
        initialValue={props.values?.name}
        rules={[
          {
            required: true,
            message: '集群名字不能为空',
            max: 15,
            min: 4
          },
        ]}
        width="md"
        label="数据源名称"
        name="name"/>
      <ProFormSelect
        label="类型"
        width="sm"
        initialValue={props.values?.type}
        options={[
          {
            value: 'MYSQL',
            label: 'MYSQL'
          },
          {
            value: 'ORACLE',
            label: 'ORACLE'
          },
        ]}
        onChange={(e: string) => e ? setProtocol(enumInversion(JdbcProtocol)[e]) : setProtocol('')}
        name="type"/>
      <ProFormText
        initialValue={props.values?.username || ''}
        rules={[
          {
            required: true,
            message: '用户名不能为空'
          },
        ]}
        fieldProps={{
          autoComplete: 'off',
        }}
        width="md"
        label="用户名"
        name="username"/>
      <ProFormText.Password
        fieldProps={{
          autoComplete: 'new-password',
        }}
        initialValue={props.values?.password || ''}
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
        ]}
        width="md"
        label="密码"
        name="password"/>
      <ProFormText
        initialValue={props.values?.url}
        fieldProps={{
          addonBefore: (
            <Space.Compact>
              <Input
                value={props?.values?.type ? enumInversion(JdbcProtocol)[props?.values?.type] : protocol}
                style={{width: 120, border: 10, margin: -10}}
                readOnly
              />
            </Space.Compact>
          ),
        }}
        transform={(v) => (protocol ? protocol + v : v)}
        rules={[
          {
            required: true,
            message: 'url不能为空',
          },
        ]}
        tooltip={<>
          url示例说明 ：<br/>
          mysql例子: jdbc:mysql://10.20.144.15:3306 <br/>
          oracle例子 : jdbc:oracle:thin:@10.20.144.29:1521:OINTEST <br/>
          media例子 : jdbc:mysql://groupKey=key (更改 key) <br/>
        </>}
        width={400}
        label="url"
        name="url"
      />
      <ProFormSelect
        label="编码"
        initialValue={props.values?.encode}
        name="encode"
        width={'sm'}
        rules={[
          {
            required: true,
            message: '编码不能为空',
          },
        ]}
        options={[
          {
            value: 'GBK',
            label: 'GBK'
          },
          {
            value: 'UTF8',
            label: 'UTF8'
          },
          {
            value: 'UTF8MB4',
            label: 'UTF8MB4'
          },
          {
            value: 'ISO-8859-1',
            label: 'ISO-8859-1'
          },
        ]}
      />
      <Button onClick={checkConnection} type={"primary"}>验证数据源</Button>

    </ModalForm>
  );
};

export default CreateOrUpdateForm;
